<template>
  <div class="container">
    <div>
      <span></span>
    </div>
    <span>我是根组件</span>
    <!-- 通过标签对 + 组件名的方式使用组件 -->
    <Parent>
    </Parent>
  </div>
</template>

<script setup>
  // 导入需要使用的组件
  import { provide, reactive } from 'vue';
  import Parent from './Parent.vue';
  // 祖先组件使用provide提供数据
  provide('title', '热搜事件')
  let hotNews = reactive([
        {
            no: 1,
            title: '赵心童世锦赛夺冠奖金有多少',
        },
        {
            no: 2,
            title: '中俄元首相约胜利日阅兵有何用意',
        },
        {
            no: 3,
            title: '出行热、消费旺、体验新',
        },
        {
            no: 4,
            title: '疯狂小杨哥现身王晶70岁生日会',
        },
        {
            no: 5,
            title: '台退将谈歼-16与美军机缠斗近50分钟',
        },
    ])
    provide('content', hotNews)

</script>
<!-- scoped 
 1、限制CSS样式作用域为当前组件，而不会影响到其他组件 
 2、会在标签上添加一个唯一属性，格式为 data-v-...-->
<style scoped>
    div {
      background-color: aqua;
    }
    span {
        color: red;
    }

    .news {
      border-radius: 5px;
      border-width: 1px;
      border-color: purple;
      border-style: solid;
      width: 40%;
      background-color: aliceblue;
    }
    .novels {
      border-radius: 5px;
      border-width: 1px;
      border-color: pink;
      border-style: solid;
      width: 40%;
      background-color: beige;
    }
</style>